<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html debug="true">
<head>
	<title>projectshen:tasks</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<cfset myself = viewstate.getValue("myself") />
	<cfset projectId = viewstate.getValue("projectId") />
	<cfset projects = viewstate.getValue("projects") />
	<style>
/*
		@import "/srvinc/js/dojo-trunk/dijit/themes/tundra/tundra.css";
*/
	@import "/js/dijit/themes/nihilo/nihilo.css";
	@import "/js/dojox/widget/Dialog/Dialog.css";
	@import "/js/dojox/grid/_grid/Grid.css";
	@import "/js/dojox/grid/_grid/tundraGrid.css";
	@import "/srvinc/ice/epay/nllsa/tabs.css";

		@import "/js/dojo/tests/dnd/dndDefault.css";
		@import "/js/dojo-trunk/dijit/tests/css/dijitTests.css";

		html, body{	
			width: 100%;	/* make the body expand to fill the visible window */
			height: 100%;
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			overflow: hidden;
		}

		.dijitSplitPane{
			margin: 5px;
		}
		
		/* make grid containers overflow hidden */
		body .dijitContentPane {
			overflow: hidden;
		}
		#rightPane {
			margin: 0;
		}

		.grid {
			height: 30em;
		}

		.priority_high .dojoxGrid-cell {
			background-color: pink;
		}

		.priority_highest .dojoxGrid-cell {
			background-color: red;
		}

		.status_closed .dojoxGrid-cell {
			color: dimgray;
		}

.dojoxGrid-rowbar-over {
	background-image: none;
	background-color: white;
	border-top-color: #FEBE47;
	border-bottom-color: #FEBE47;
	border-bottom-width: 2px;
	padding-bottom: 0;
}

.dojoxGrid-row-over {
	border-top-color: #FEBE47;
	border-bottom-color: #FEBE47;
	border-bottom-width: 2px;
	padding-bottom: 0;
	/*background-color: #FFDD9D;*/
	/*background-color: #FDFDFD;*/
}

	</style>

<script type="text/javascript" src="/js/dojo/dojo.js"
	djConfig="<cfif findNoCase("epay.local",cgi.SERVER_NAME)>isDebug:true,</cfif>parseOnLoad: true,dojoIframeHistoryUrl: '/js/dojo/resources/iframe_history.html',useCommentedJson:true"></script>
<script type="text/javascript" src="/js/dojo/nmkids.js"></script>

	<script type="text/javascript">
	dojo.registerModulePath("doshen","../../doshen-src/doshen");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.SplitContainer");
		dojo.require("dijit.layout.TabContainer");
		dojo.require("dijit.layout.LayoutContainer");
		dojo.require("dijit.layout.LinkPane");		
		dojo.require("dijit.Dialog");
		dojo.require("dojo.parser");
		dojo.require("dojo.dnd.Source");
    dojo.require("dojo.data.ItemFileReadStore");
		dojo.require("dojox.grid.Grid");
		dojo.require("dojox.grid._data.model");
		dojo.require("dojox.grid._data.dijitEditors");
		dojo.require("doshen.data.model.databaseModel");
//ticket stuff
		dojo.require("dijit.form.Form");
		dojo.require("dijit.form.ValidationTextBox");
		dojo.require("dijit.form.NumberSpinner");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.FilteringSelect");
		dojo.require("dijit.TitlePane");
		dojo.require("dijit.Menu");
		dojo.require("dijit.Tooltip");
    dojo.require("dijit.Tree");

		dojo.addOnLoad(function(){
		    dojo.extend(dijit.Dialog,{
		         setTitle: function(/*string*/title){
		             this.titleNode.innerHTML = title || "";
		         }
		    });
<!---
		    dojo.extend(dojox.grid.Grid,{
		         onCellContextMenu: function(/*event*/e){
							//this.cellNode = e.cellNode;
		         }
		    });
--->
		});

		var model = new doshen.data.model.DbTable(null, null, '<cfoutput>#myself#</cfoutput>ticket.grid.data', "test", "testtbl");
		// simple display of row info; based on model observing.
		modelChange = function() {
			dojo.byId('rowCount').innerHTML = model.count + ' row(s)';
		}
		model.observer(this);
		
		// yay, let's deal with MySql date types, at least a little bit...
		// NOTE: supports only default date formatting YYYY-MM-DD HH:MM:SS or YY-MM-DD HH:MM:SS
		mysqlDateToJsDate = function(inMysqlDateTime, inDateDelim, inTimeDelim) {
			var dt = inMysqlDateTime.split(' '), d = dt[0], t = dt[1], r;
			d = d&&d.split(inDateDelim||'-');
			t = t&&t.split(inTimeDelim||':');
			if (d && d.length == 3) {
				r = new Date();
				r.setYear(d[0]);
				r.setMonth(parseInt(d[1])-1);
				r.setDate(d[2]);
			}
			if (t && t.length == 3) {
				r = r || new Date();
				r.setHours(t[0]);
				r.setMinutes(t[1]);
				r.setSeconds(t[2]);
			}
			return r || new Date(inMysqlDateTime);
		}
		
		jsDateToMySqlDate = function(inDate) {
			var
				d = new Date(inDate),
				y = d.getFullYear(),
				m = dojo.string.pad(d.getMonth() + 1),
				dd = dojo.string.pad(d.getDate())
			return dojo.string.substitute("${0}-${1}-${2}",[y, m, dd]);
		};
		
		// custom simple MySql date formatter
		formatMySqlDate = function(inDatum) {
			return inDatum != dojox.grid.na ? dojo.date.locale.format(mysqlDateToJsDate(inDatum), this.constraint) : dojox.grid.na;
		}
		
		// custom simple MySql date editor
		dojo.declare("mySqlDateEditor", dojox.grid.editors.DateTextBox, {
			format: function(inDatum, inRowIndex){
				inDatum = mysqlDateToJsDate(inDatum);
				return this.inherited(arguments, [inDatum, inRowIndex]);
			},
			getValue: function(inRowIndex){
				var v = this.editor.getValue(), fv = jsDateToMySqlDate(v);
				return fv;
			}
		});
		
		var gridLayout = [ 
			{ type: "dojox.GridRowView", width: "20px" },
			{
			defaultCell: { width: 6 /*, editor: dojox.grid.editors.Dijit*/ }, 
			cells: [[
				{ name: ' ', width: 1, styles: 'text-align: center;', editor: dojox.grid.editors.Bool },
				{ name: 'Id',  width: 2, styles: 'text-align: right;', editorClass: "dijit.form.NumberTextBox" }, 
				{ name: 'Name', width: 20},
				{ name: 'Priority', styles: 'text-align: center;', editor: dojox.grid.editors.Select, options: ["normal", "high", "low"]},
				{ name: 'Order', styles: 'text-align: right;',
					editor: dojox.grid.editors.Dijit, width:3,
					editorClass: "dijit.form.NumberSpinner" },
				{ name: 'Estimated Hours',  width: 4, styles: 'text-align: right;', editor: dojox.grid.editors.Dijit, editorClass: "dijit.form.NumberTextBox" }, 
				{ name: 'Total Hours',  width: 4, styles: 'text-align: right;'}, 
				{ name: 'Status', styles: 'text-align: center;', editor: dojox.grid.editors.Select, options: ["assigned", "closed", "new"]},
				{ name: 'Owner', width: 7},
				{ name: 'Modified', 
					editor: mySqlDateEditor, 
					formatter: formatMySqlDate, 
					constraint: {selector: "date"}, 
					width: 7, 
					styles: 'text-align:right;'}
			]]}
		];


		function waitMessage() {
			alert('Edit in progress, please wait.');
		}
		
		function getDefaultRow() {
			return ['', '', '', jsDateToMySqlDate(new Date())];
		}
		function addRow() {
			if(model.canModify()){
				grid.addRow(getDefaultRow());
			}else{
				waitMessage();
			}
		}
		
		function removeSelected(){
			if(model.canModify()){
				grid.removeSelectedRows();
			}else{
				waitMessage();
			}
		}

		function onStyleRow(inRow) {
			with (inRow) {
				if (odd)
					customStyles += ' color: orange;';
				if (selected)	
					customClasses += ' selectedRow';
				if (model.getRow(inRow.index).id == 3)
					alert('hi');
				if (over)	
					customClasses += ' overRow';
				if (!over && !selected)
					dojox.Grid.prototype.onStyleRow.apply(this, arguments);
			}	
		}

function colorDescriptions(inRow) {
   if (model.getRow(inRow.index) == undefined)
      return;
   if (model.getRow(inRow.index)[3] == 'high') {
      //inRow.customStyles = 'color:red';
      inRow.customClasses = 'priority_high';
   }
   if (model.getRow(inRow.index)[3] == 'highest') {
      //inRow.customStyles = 'color:red';
      inRow.customClasses = 'priority_highest';
   }
   if (model.getRow(inRow.index)[7] == 'closed') {
      //inRow.customStyles = 'color:red';
      inRow.customClasses = 'status_closed';
   }
   if (model.getRow(inRow.index)[7] == 'new') {
      inRow.customStyles = 'color:blue';
   }
}

	function sayHi(row) {
	//  alert('hi '+row.rowIndex); 
	//  alert(': id=' + model.getRow(row.rowIndex)[1]);
		if(row.cellIndex == 2) {
//			openTicketDialog(model.getRow(row.rowIndex)[1]);
			openTicketTab(model.getRow(row.rowIndex)[1]);
		}
	}

	var thirdDlg;

	function openTicketDialog(ticketId) {
		if(!thirdDlg){	
			var pane = dojo.byId('thirdDialog');
			pane.style.width = "300px"; 	
			thirdDlg = new dijit.Dialog({
				id: "dialog3",
				title: "Programatic Dialog Creation"
			},pane);
		}
		thirdDlg.setTitle("Ticket <strong>"+ ticketId + "</strong>");
		thirdDlg.setHref('<cfoutput>#myself#ticket.edit&projectId=#projectId#&ticketid=</cfoutput>'+ticketId);
		thirdDlg.show();
	}

	function testClose(pane,tab){
//		alert('hi');
//		pane.destroyRecursive();
//		pane.closeChild(tab);
//		tab.destroyRecursive();
	   setTimeout('dijit.byId(\"' + tab.id + 'form\").destroyRecursive();',200);  //new, can't destroy 'this' within 'this'.

		return true;
//	  return confirm("Please confirm that you want tab "+tab.title+" closed");
	}

	function openTab(tabContainer,tabId,tabTitle,tabHref) {
			var tc = dijit.byId(tabContainer);
			if(!dijit.byId(tabId)) {
				var cp = new dijit.layout.LinkPane({ id:tabId, title: tabTitle, href:tabHref, selected:true, closable:true, onClose:testClose });
				tc.addChild(cp);
				cp.startup();
			} else {
			  var cp = dijit.byId(tabId);
			}
			tc.selectChild(cp);
	}


	function openTicketTab(ticketId) {
		openTab("mainTabContainer","ticketTab"+ticketId,"Ticket #" +ticketId,'<cfoutput>#myself#ticket.edit&projectId=#projectId#&ticketid=</cfoutput>'+ticketId);
	}
/*
  function createMenu() {
	   // create a menu programmatically
	   function fClick() {alert("clicked!")};
	
	   pMenu = new dijit.Menu({targetNodeIds:["grid"], id:"gridMenu"});
	   pMenu.addChild(new dijit.MenuItem({label:"Programmatic Context Menu", disabled:true}));
	   pMenu.addChild(new dijit.MenuSeparator());
	   pMenu.addChild(new dijit.MenuItem({label:"Simple menu item", onClick:fClick}));
	   pMenu.addChild(new dijit.MenuItem({label:"Another menu item", onClick:fClick}));
	   pMenu.addChild(new dijit.MenuItem({label:"With an icon", iconClass:"dijitEditorIcon dijitEditorIconCut", onClick:fClick}));
  }
  dojo.addOnLoad(createMenu);
*/

			var 
				showTooltip = function(e) {
						var msg = "This is cell " + e.rowIndex + ", " + e.cellIndex;
						dijit.showTooltip(msg, e.cellNode);
				},
				hideTooltip = function(e) {
					dijit.hideTooltip(e.cellNode);
					dijit._masterTT._onDeck=null;
				}
			
   
    var data = {data: {  label: 'name',
            identifier: 'id',
            items: [
            <cfoutput query="projects">
                { id:'p#currentrow#', name:'#projectname#', type:'category',
						       children: [
						          { id:'t#currentrow#', name:'Tickets', type:'poptart' },
						          { id:'f#currentrow#', name:'Reports', type:'poptart' },
						          { id:'s#currentrow#', name:'Settings', type:'category' }
						       ]},
						</cfoutput>
                { id:'cin', name:'User Options', type: 'category'}
            ]
        }};
   
    var fruitStore=new dojo.data.ItemFileReadStore(data);

		var lastSearchValue = "";
		function doSearch(el) {
			if (el.value!=lastSearchValue) {
				grid.model.setFilters('ticketsummary|'+el.value);
				grid.refresh();
				lastSearchValue = el.value;
			}
		}

	function search_delay(element) {
		
		// Create a function to get the search results
		var func = function() { doSearch( element ); };

		// Check to see if there is already a timeout and if so...
		// ...cancel it and create a new one
		if ( element.zid ) {
			clearTimeout(element.zid);
		}
		element.zid = setTimeout(func,500);

	}


       
	</script>

	<script type="text/javascript">

	</script>
</head>

<body class="nihilo">

	<div id="outer" dojoType="dijit.layout.LayoutContainer"
		style="width: 100%; height: 100%;">

		<div dojoType="dijit.layout.SplitContainer"
			orientation="horizontal"
			sizerWidth="7"
			activeSizing="true"
			style="border: 1px solid #bfbfbf;"
			layoutAlign="client">
			
			<div dojoType="dijit.layout.ContentPane" sizeMin="30" sizeShare="30">
	

<!--- tree --->
	<ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
		<li dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</li>
		<li dojoType="dijit.MenuItem" disabled="true">Disabled Item</li>
		<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
			onClick="alert('not actually cutting anything, just a test!')">Cut</li>
		<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
			onClick="alert('not actually copying anything, just a test!')">Copy</li>
		<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
			onClick="alert('not actually pasting anything, just a test!')">Paste</li>

		<li dojoType="dijit.PopupMenuItem">
			<span>Enabled Submenu</span>
			<ul dojoType="dijit.Menu" id="submenu2">
				<li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li>
				<li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li>
				<li dojoType="dijit.PopupMenuItem">
					<span>Deeper Submenu</span>

					<ul dojoType="dijit.Menu" id="submenu4">
						<li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</li>
						<li dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</li>
					</ul>
				</li>
			</ul>
		</li>
		<li dojoType="dijit.PopupMenuItem" disabled="true">

			<span>Disabled Submenu</span>
			<ul dojoType="dijit.Menu" id="submenu3" style="display: none;">
				<li dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</li>
				<li dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</li>
			</ul>
		</li>
	</ul>

	<div dojoType="dijit.Tree" id="tree2" label="Projects" store="fruitStore" query="{type:'category'}" class="container" style="padding:1em 1em">
		<script type="dojo/connect">
			var menu = dijit.byId("tree_menu");
			// when we right-click anywhere on the tree, make sure we open the menu
			menu.bindDomNode(this.domNode);

			dojo.connect(menu, "_openMyself", this, function(e){
				// get a hold of, and log out, the tree node that was the source of this open event
				var tn = dijit.getEnclosingWidget(e.target);
				console.debug(tn);

				// now inspect the data store item that backs the tree node:
				console.debug(tn.item);

				// contrived condition: if this tree node doesn't have any children, disable all of the menu items
				menu.getChildren().forEach(function(i){ i.setDisabled(!tn.item.children); });

				// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
			});
		</script>
</div>
<!--- tree --->


	
			</div>
			<div dojoType="dijit.layout.LinkPane" href="<cfoutput>#myself#</cfoutput>ticket.grid" sizeMin="50" sizeShare="70">
			</div>
	
		</div>

	</div>



</body>
</html>
